<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IoT物联网管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <!--引入 Highcharts-->
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <link rel="stylesheet" href="../style/index.css">
    <link rel="stylesheet" href="../style/devM.css">


</head>
<body>
<div class="my-container" style="background-image: url(../image/header.jpg)">
    <div class="container">
        <div class="page-header">
            <h2 style="color: white">慢阻肺患者家庭护理数据采集与控制系统</h2>
        </div>
    </div>
</div>

<nav>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="../mainWindows.html" onclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'navbar-首页'])">首页</a>
            </div>
            <div class="navbar-collapse collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li><a href="systemInfo.html" >健康分析</a></li>
                    <li><a href="devManagement.html">实时数据</a></li>
                    <li><a href="userManagement.html">个人信息</a></li>
                    <li class="hidden-sm"><a href="about.html">关于</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<section  style="height: 65vh; background-color: oldlace">
    <div style="height: 100%; width: 50%; float: left">
        <div style="width: 216px;">
            <div class="menu-title">
                <h3 style="color: #FFFFFF; text-align: center; padding-top: 0.5em">网关分类</h3>
            </div>
            <div style="background-color: #FFFFFF; float: left; height: 35vh;width: 216px; overflow: auto">
                <ul id="test">
                    
                </ul>
            </div>
            <div class="container">
                <h3 id="gateID"></h3>
                <p id="gatewayDes"></p><br>
                <p id="gatewayLoc"></p>
                <p id="gatewayIP"></p>
                <p id="gatewayPort"></p>
            </div>
        </div>

        <div style="margin:2em 0 0 2em; overflow: auto">
            <button type="button" class="btn btn-default btn-lg"  style="margin-right: 1.5em" data-toggle="modal" data-target="#addGate">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true">网关&nbsp</span>
            </button>
            <button type="button" class="btn btn-default btn-lg"  style="margin-right: 1.5em" onclick="deleteGeteway()">
                <span class="glyphicon glyphicon-trash" aria-hidden="true">网关&nbsp</span>
            </button>
            <button type="button" class="btn btn-default btn-lg" style="margin-right: 1.5em" id="GeteModify" data-toggle="modal" data-target="#modifyGate" >
                <span class="glyphicon glyphicon-wrench" aria-hidden="true">网关&nbsp</span>
            </button>
            <button type="button" class="btn btn-default btn-lg" onclick="downLog()">
                <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true">网关日志&nbsp</span>
            </button>
            <br><br>
            <button type="button" class="btn btn-default btn-lg"  style="margin-right: 1.5em" data-toggle="modal" data-target="#add">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true">传感器</span>
            </button>
            <button type="button" class="btn btn-default btn-lg"  style="margin-right: 1.5em" onclick="deleteSensors()">
                <span class="glyphicon glyphicon-trash" aria-hidden="true">传感器</span>
            </button>
            <button type="button" class="btn btn-default btn-lg" style="margin-right: 1.5em" id="devModify" data-toggle="modal" data-target="#modify" >
                <span class="glyphicon glyphicon-wrench" aria-hidden="true">传感器</span>
            </button>
            <button type="button" class="btn btn-default btn-lg" onclick="downloadeLog()">
                <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true">传感器日志</span>
            </button>
        </div>

        <!--增加传感器-->
        <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title modal-text" id="myModalLabel">增加传感器</h4>
                    <form id="addForm" onsubmit="return false" action="##" method="post">
                        <div class="modal-body">
                            <div class="container">
                                <div class="form-group form-input">
                                    <label for="description">简介</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="description" name="description" required="required" placeholder="简要信息">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="location">地点</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="location" name="location" required="required" placeholder="请输入安装地点">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="factory">厂商</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="factory" name="factory" required="required" placeholder="请输入传感器厂商">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <input type="text" id="install_time" name="install_time" style="display:none" >
                                    <label for="maintenance_time">保修截至时间</label>
                                    <div style="width: 30%">
                                        <input type="date" class="form-control"  id="maintenance_time" name="maintenance_time" required="required" placeholder="请输入传感器保修截至时间">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="produce_date">传感器生产时间</label>
                                    <div style="width: 30%">
                                        <input type="date" class="form-control"  id="produce_date" name="produce_date" required="required" placeholder="请输入传感器生产时间">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="gate_id">网关</label>
                                    <div style="width: 30%">
                                        <select  class="selectpicker"  id="gate_id" name="gate_id">

                                        </select>
                                    </div>
                                    <label for="classify_id">传感器类型</label>
                                    <div style="width: 30%">
                                        <select  class="selectpicker"  id="classify_id" name="classify_id">
                                            <option value ="1">温度传感器</option>
                                            <option value ="2">湿度传感器</option>
                                            <option value="3">烟雾传感器</option>
                                            <option value="4">霍尔传感器</option>
                                            <option value="5">光敏传感器</option>
                                            <option value="6">液位传感器</option>
                                            <option value="7">SF6传感器</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="alert" style="color: red; text-align: center"></p>
                        <div class="modal-footer">
                            <div class="form-group" style="text-align: center">
                                <input type="submit" class="btn btn-default btn-lg btn-primary" onclick="addDev()" value="增加">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--修改传感器-->
        <div class="modal fade" id="modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title modal-text" id="myModalLabel2">修改传感器信息</h4>
                    <form id="ModifyForm" onsubmit="return false" action="##" method="post">
                        <input id="id2" name="id" style="display: none">
                        <div class="modal-body">
                            <div class="container">
                                <div class="form-group form-input">
                                    <label for="description">简介</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="description2" name="description" required="required" placeholder="简要信息">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="location">地点</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="location2" name="location" required="required" placeholder="请输入安装地点">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="factory">厂商</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="factory2" name="factory" required="required" placeholder="请输入传感器厂商">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <input type="text" id="install_time2" name="install_time" style="display:none" >
                                    <label for="maintenance_time">保修截至时间</label>
                                    <div style="width: 30%">
                                        <input type="date" class="form-control"  id="maintenance_time2" name="maintenance_time" required="required" placeholder="请输入传感器保修截至时间">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="produce_date">传感器生产时间</label>
                                    <div style="width: 30%">
                                        <input type="date" class="form-control"  id="produce_date2" name="produce_date" required="required" placeholder="请输入传感器生产时间">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="gate_id">网关</label>
                                    <div style="width: 30%">
                                        <select  class="selectpicker"  id="gate_id2" name="gate_id">

                                        </select>
                                    </div>
                                    <label for="classify_id">传感器类型</label>
                                    <div style="width: 30%">
                                        <select  class="selectpicker"  id="classify_id2" name="classify_id">
                                            <option value ="1">温度传感器</option>
                                            <option value ="2">湿度传感器</option>
                                            <option value="3">烟雾传感器</option>
                                            <option value="4">霍尔传感器</option>
                                            <option value="5">光敏传感器</option>
                                            <option value="6">液位传感器</option>
                                            <option value="7">SF6传感器</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <p class="alert" style="color: red; text-align: center"></p>
                        </div>
                        <div class="modal-footer">
                            <div class="form-group" style="text-align: center">
                                <input type="submit" class="btn btn-default btn-lg btn-primary" onclick="modifyMsg()" value="修改">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--增加网关-->
        <div class="modal fade" id="addGate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title modal-text" id="myModalLabel3">增加网关</h4>
                    <form id="addForm2" onsubmit="return false" action="##" method="post">
                        <div class="modal-body">
                            <div class="container">
                                <div class="form-group form-input">
                                    <label for="description">简介</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="descriptionGate" name="description" required="required" placeholder="简要信息">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="location">地点</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="locationGate" name="location" required="required" placeholder="请输入安装地点">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="factory">IP</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="ipAddr" name="ip" required="required" placeholder="请ip地址">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="factory">端口号</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="port" name="port" required="required" placeholder="请输入端口号">
                                    </div>
                                </div>
                                </div>
                            </div>
                        <p class="alert" style="color: red; text-align: center"></p>
                        <div class="modal-footer">
                            <div class="form-group" style="text-align: center">
                                <input type="submit" class="btn btn-default btn-lg btn-primary" onclick="addGate()" value="增加">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--修改网关信息-->
        <div class="modal fade" id="modifyGate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title modal-text" id="myModalLabel4">修改网关信息</h4>
                    <form id="ModifyForm2" onsubmit="return false" action="##" method="post">
                        <div class="modal-body">
                            <div class="container">
                                <input id="gatewayID" name="id" style="display: none">
                                <div class="form-group form-input">
                                    <label for="description">简介</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="descriptionGate2" name="description" required="required" placeholder="简要信息">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="location">地点</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="locationGate2" name="location" required="required" placeholder="请输入安装地点">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="factory">IP</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="ipAddr2" name="ip" required="required" placeholder="请ip地址">
                                    </div>
                                </div>
                                <div class="form-group form-input">
                                    <label for="factory">端口号</label>
                                    <div style="width: 30%">
                                        <input type="text" class="form-control" id="port2" name="port" required="required" placeholder="请输入端口号">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="alert" style="color: red; text-align: center"></p>
                        <div class="modal-footer">
                            <div class="form-group" style="text-align: center">
                                <input type="submit" class="btn btn-default btn-lg btn-primary" onclick="modifyGate()" value="修改">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <div style="height: 100%; width: 50%; float: left">
        <div style="height: 70%;">
            <div id="container" style="width:100%;height:300px"></div>
            <div class="message"></div>
        <div>
            <div style="float: left">
                <label for="desc">简介：</label>
                <p id="desc">xxxxx</p>
            </div>
            <div style="float: left; margin-left: 1em; margin-right: 1em">
                <label for="loc">位置：</label>
                <p id="loc">xxxxx</p>
            </div>
            <div style="padding-left: 1em">
                <label for="fac">厂商：</label>
                <p id="fac">xxxxx</p>
            </div>
            <div style="float: left">
                <label for="proTime">生产时间：</label>
                <p id="proTime">xxxxx</p>
            </div>
            <div style="float: left; margin-left: 1em">
                <label for="insTime">安装时间：</label>
                <p id="insTime">xxxxx</p>
            </div>
            <div style="float: left; margin-left: 1em">
                <label for="mainTime">保修截至时间：</label>
                <p id="mainTime">xxxxx</p>
            </div>
        </div>
    </div>
</section>


<footer>
    <div class="foot">
        <h5 style="text-align: center">软件工程导论课程团队项目 @ Coding</h5>
    </div>
</footer>

<script src="../script/devModify.js"></script>
<script src="../script/GatewayManage.js"></script>
<script>
    getGateways()
</script>

<script>
    var date = new Date();
    var nowtime = date.getTime();
    $("#install_time").val(nowtime);
</script>
<script>
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
</script>
</body>
</html>